<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Classes Component</div>

                    <div class="card-body">

                        <div :class="classObject" v-text="value"></div>
                        <div :style="{ fontSize: value * 4 + 'px' }" v-text="value"></div>

                        <button type="button" @click="value++"> +</button>
                        <button type="button" @click="value--"> -</button>
                        <button type="button" @click="error = !error"> Error</button>
                        <button type="button" @click="warning = !warning"> Warning</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('ClassesComponent mounted.')
        },

        data: () => ({
            value: 9,
            error: false,
            warning: false
        }),

        methods: {

        },
        
        computed: {
            classObject() {
                return {
                    'red-error' : this.value < 9,
                    'green-error' : this.value > 9,
                    'yellow-warning' : this.value > 9
                }
            }
        }

    }
</script>

<style>
    .red-error {
        background-color: darkred;
    }

    .yellow-warning {
        text-decoration: underline;
    }

    .green-error {
        background-color: darkgreen;
    }
</style>